<template>
    <div v-if="flag" class="business">
        <Table
            width="100%"
            :columns="contractArrival"
            :data="arrivalTable"
            @on-selection-change="showSelect"
            :loading="loading"
            border
        >
            <!-- 到账银行 -->
            <template slot-scope="{ row }" slot="receivingBank">
                <span>{{getTitle('payBank',row.receivingBank)}}</span>
            </template>
            <!-- 勾稽状态 -->
            <template slot-scope="{ row }" slot="status">
                <span>{{getTitle('AccountRegistStatus',row.status)}}</span>
            </template>
        </Table>
    </div>
    <div v-else class="business">
        <Form ref="formData" :model="formData" inline :label-width="120">
            <Row>
                <FormItem label="到账银行" prop="receivingBank">
                    <Select style="width: 170px" v-model="formData.receivingBank" clearable>
                        <Option
                            v-for="(item,index) in dataDict.payBankDict"
                            :key="index"
                            :value="item.value"
                        >{{item.title}}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="到账金额">
                    <ruiNumber type="currency" style="width:160px"
                               v-model="formData.receivedAmt"/>
                </FormItem>
                <FormItem label="付款客户">
                    <Input type="text" v-model="formData.paymentCust"/>
                </FormItem>
                <FormItem label="打款时间" prop="arrivalTime">
                    <DatePicker
                        :start-date="Date.now()"
                        style="width: 170px"
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder="请选择"
                        v-model="formData.arrivalTime"
                    ></DatePicker>
                </FormItem>
                <FormItem label="勾稽状态" prop="status">
                    <Select style="width: 170px" v-model="formData.status" clearable>
                        <Option
                            v-for="(item,index) in dataDict.AccountRegistStatusDict"
                            :key="index"
                            :value="item.value"
                        >{{item.title}}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" icon="ios-search" :loading="loading" @click="getArrivalList()">搜索</Button>
                </FormItem>
            </Row>
        </Form>
        <div class="page">
            <Row>
                <Col span="24">
                    <Table
                        width="100%"
                        :columns="contractArrival"
                        :data="arrivalTable.records"
                        @on-selection-change="showSelect"
                        :loading="loading"
                        border
                    >
                        <!-- 到账银行 -->
                        <template slot-scope="{ row }" slot="receivingBank">
                            <span>{{getTitle('payBank',row.receivingBank)}}</span>
                        </template>
                        <!-- 勾稽状态 -->
                        <template slot-scope="{ row }" slot="status">
                            <span>{{getTitle('AccountRegistStatus',row.status)}}</span>
                        </template>
                    </Table>
                </Col>
                <Col span="24">
                    <div class="page">
                        <Page
                            :current="arrivalTable.current"
                            :transfer="true"
                            :total="arrivalTable.total"
                            :page-size="arrivalTable.size"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            :page-size-opts="pageSizeOpts"
                            size="small"
                            show-total
                            show-elevator
                            show-sizer
                        ></Page>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import {
        getArrivalList,
        getArrival
    } from "_p/basic/api/contract/contract-cancel/index";
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";

    export default {
        name: "",
        props: {
            dataDict: {
                type: Object
            },
            Obj: {
                type: Object,
            },
        },
        data() {
            return {
                formData: {
                    receivingBank: null,
                    receivedAmt: null,
                    paymentCust: null,
                    status: null,
                    arrivalTime: null,
                    pageNumber: 1, // integer($int32) // 当前页
                    pageSize: 10 //integer($int32) // 多少条
                },
                flag: false,
                loading: false,
                pageSizeOpts: [10, 20, 50, 100],
                processModeDict: [],
                contractArrival: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: "网银编号",
                        key: "ebankNo",
                        className: "applyNo"
                    },
                    {
                        title: "到账银行",
                        key: "receivingBank",
                        slot: "receivingBank"
                    },
                    {
                        title: "到账金额",
                        key: "receivedAmt",
                    },
                    {
                        title: "打款时间",
                        key: "arrivalTime",
                    },
                    {
                        title: "付款客户",
                        key: "paymentCust",
                    },
                    {
                        title: "勾稽状态",
                        key: "status",
                        slot: "status"
                    }
                ],
                arrivalTable: {
                    current: 1,
                    pages: 0,
                    searchCount: false,
                    size: 10,
                    total: 0,
                    orders: [],
                    records: []
                }
            };
        },
        mounted() {
            this.getArrival();
        },
        methods: {
            getArrival() {
                getArrival(this.Obj.contractNo).then(res => {
                    if (res.code === "0000") {
                        if (res.data && res.data.length) {
                            this.flag = true;
                        }
                        this.arrivalTable = res.data;
                    } else {
                        this.$Message.error("Fail!");
                    }
                });
            },
            // 分页 Fn
            changePageSize(num) {
                this.loading = true;
                this.formData.pageSize = num;
                this.getArrivalList();

            },
            changePage(num) {
                this.loading = true;
                this.formData.pageNumber = num;
                this.getArrivalList();
            },
            getArrivalList() {
                this.loading = true;
                getArrivalList(this.formData).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.arrivalTable = res.data;
                    } else {
                        this.$Message.error("Fail!");
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            showSelect(e) {
                this.selectList = e;
                this.formData.accountRegister = e;
                this.selectCount = e.length;
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }
        }
    };
</script>

<style lang="less" scoped>
    .business form {
        width: 100%;
    }
</style>
